<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="images/icon.ico" type="/image/x-icon" />
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="css/main.css">
    <title>Query - Orders Management Display System</title>
</head>
<body>
<main>
<div class="d-flex flex-column flex-shrink-0 p-3 bg-light" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" style="width: 20%;min-width: 150px">
    <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
        <span class="fs-4">Orders Management Display System</span>
    </a>
    <hr>
    <ul class="nav nav-pills flex-column mb-auto">
        <li class="nav-item">
            <a href="overview.html" class="nav-link link-dark" aria-current="page">
                Overview
            </a>
        </li>
        <li>
            <a href="account.html" class="nav-link link-dark">
                Accounts
            </a>
        </li>
        <li>
            <a href="manage.html" class="nav-link link-dark">
                All Orders
            </a>
        </li>
        <li>
            <a href="query.html" class="nav-link active">
                Orders Query
            </a>
        </li>
        <li>
            <a href="echarts.html" class="nav-link link-dark">
              Chart Display
            </a>
          </li>
        <li>
            <a href="file.html" class="nav-link link-dark">
                File
            </a>
        </li>
    </ul>
    <hr>
    <div class="dropdown">
        <a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false">
            <strong id="user_name_text"></strong>
        </a>
        <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2">
            <li><a class="dropdown-item" href="setting.html">Settings</a></li>
            <li><hr class="dropdown-divider"></li>
            <li class="dropdown-item" id="logout">
                Logout
            </li>
        </ul>
        <script type="text/javascript">
            const logoutButton = document.getElementById('logout')
            logoutButton.addEventListener("click", function () {
                const request = new XMLHttpRequest()
                request.onreadystatechange = function () {
                    if (request.readyState === 4 && request.status === 200) {
                        const json = JSON.parse(request.responseText)
                        if (json.errorCode !== "00000") {
                            alert(json.message)
                        }
                        window.location.href = "/"
                    } else if (request.readyState === 4 && request.status !== 200) {
                        alert(request.status)
                    }
                }

                request.open("POST", "/api/user/logout", true)
                request.send()
            })

            window.onload = function () {
                sendCurrent()
            }

            function sendCurrent() {
                const request = new XMLHttpRequest()
                const usernameText = document.getElementById('user_name_text')
                request.onreadystatechange = function () {
                    if (request.readyState === 4 && request.status === 200) {
                        const json = JSON.parse(request.responseText)
                        if (json.errorCode !== undefined) {
                            alert(json.message)
                            window.location.href = "/"
                            return
                        }
                        usernameText.innerHTML = json.username
                    } else if (request.readyState === 4 && request.status !== 200) {
                        alert(request.status)
                    }
                }

                request.open("POST", "/api/user/current", true)
                request.send()
            }
        </script>
    </div>
</div>
    <div class="d-flex flex-column p-4 flex-grow-1 allow-rolling">
        <h1 class="flex-column">Query Orders</h1>
        <div class="d-flex flex-xl-row">
        <form name="query_form" method="post" action="">
            <div class="d-flex flex-column p-4">
                <div class="d-flex flex-sm-row">
                    <div class="input-group">
                        <input class="form-control text-input" type="text" name="good_param" id="good_param_input" placeholder="*Query content">
                    </div>
                </div>
                <div class="d-flex flex-row">
                    <label>
                        Query Qualifier
                        <select id="qualifier-select" class="form-select" name="qualifier">
                            <option value ="id">Orders' ID</option>
                            <option value ="name">Orders' Name</option>
                            <option value ="date">Orders' Date</option>
                        </select>
                    </label>
                    <label>
                        Orders' Status
                        <select id="status-select" class="form-select" name="good_status">
                            <option value ="">All</option>
                            <option value ="true">Y</option>
                            <option value ="false">N</option>
                        </select>
                    </label>
                    <div style="user-select: none"><br><br><br><br></div>
                </div>
                <div class="d-flex flex-row-reverse">
                    <div class="btn-group">
                        <button class="btn btn-outline-primary" type="button" id="order-submit" name="query" >Query</button>
                        <button class="btn btn-outline-secondary" type="reset" id="btn_reset">Reset</button>
                        <a href="file.html" class="btn btn-outline-primary" type="button">Import</a>
                    </div>
                </div>
            </div>
        </form>
            <div class="d-flex flex-xl-row p-4 flex-grow-1">
                <div class="d-flex flex-xl-column flex-grow-1">
                    <table class="table table-hover">
                        <caption>Orders</caption>
                        <thead class="table table-hover">
                        <tr>
                            <td>ID</td>
                            <td>Name</td>
                            <td>Amount</td>
                            <td>Date</td>
                            <td>Valid</td>
                        </tr>
                        </thead>
                        <tbody id="order-table-body">
                        </tbody>
                        <script type="text/javascript">
                            const submitButton = document.getElementById("order-submit")
                            submitButton.addEventListener("click", queryOrders)

                            function queryOrders() {
                                const validSelect = document.getElementById("status-select")
                                const qualifierSelect = document.getElementById("qualifier-select")
                                const qualifierInput = document.getElementById("good_param_input")

                                const request = new XMLHttpRequest()
                                const tableBody = document.getElementById("order-table-body")
                                let tableInnerHtml = ""
                                request.onreadystatechange = function () {
                                    if (request.readyState === 4 && request.status === 200) {
                                        const json = JSON.parse(request.responseText)
                                        if (json.errorCode !== undefined) {
                                            alert(json.message)
                                            return
                                        }
                                        for (let i in json) {
                                            let order = json[i]
                                            let state = order.valid === true ? "Y" : "N";
                                            tableInnerHtml += `<tr>
                                            <td>${order.id}</td>
                                            <td>${order.name}</td>
                                            <td>${order.amount}</td>
                                            <td>${order.date}</td>
                                            <td>${state}</td>
                                        </tr>`
                                        }
                                        tableBody.innerHTML = tableInnerHtml
                                    }
                                }
                                request.open("POST", "/api/order/get", true)
                                let qualifierParam;
                                if (qualifierSelect.value === "id") {
                                    qualifierParam = "id="
                                } else if (qualifierSelect.value === "name") {
                                    qualifierParam = "name="
                                } else {
                                    qualifierParam = "date="
                                }
                                request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                                request.send(`valid=${validSelect.value}&${qualifierParam}${qualifierInput.value}`)
                            }
                        </script>
                    </table>
                </div>
            </div>
    </div>
    </div>


    <script>

    </script>
</main>
</body>
</html>
